import React, { PureComponent } from 'react';
import { Form, Modal, Input } from 'antd';
import { DropTarget } from 'react-dnd';
import { TextNode } from '../Node';
import { ItemTypes, BackgroudImg } from '../Common';

import styles from './index.less';

const FormItem = Form.Item;

const CreateForm = Form.create()(props => {
  const { modalVisible, form, handleAdd, handleModalVisible, type } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      const node = { ...fieldsValue, type };
      handleAdd(node);
    });
  };

  const showForm = () => {
    switch (type) {
      case 'text':
        return (
          <div>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="控件标题">
              {form.getFieldDecorator('caption', {
                rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="数据来源">
              {form.getFieldDecorator('origin', {
                rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="绑定字段">
              {form.getFieldDecorator('dataField', {
                rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="默认显示">
              {form.getFieldDecorator('value', {
                rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <Modal
      destroyOnClose
      title="编辑节点"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      {showForm()}
    </Modal>
  );
});

class Designer extends PureComponent {
  constructor(props) {
    super();
    this.state = {
      nodes: props.style.controls,
      showGrid: true,
      modalVisible: false,
      newNodeType: 'text',
      currentNode: null,
    };
  }

  dropItem = type => {
    this.setState(state => {
      const newState = { ...state };
      newState.modalVisible = true;
      newState.newNodeType = type;
      return newState;
    });
  };

  handleAdd = fields => {
    const node = { ...fields, id: new Date().getTime() };
    this.setState(state => {
      const nodes = [...state.nodes, node];
      return { ...state, nodes, modalVisible: false };
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  handleNodeClick = node => {
    this.setState({ currentNode: node });
  };

  render() {
    const { nodes, showGrid, modalVisible, newNodeType, currentNode } = this.state;
    const { connectDropTarget, style, designerWidth, designerHeight } = this.props;
    const { size, reportCount } = style.pageSetting;
    const width = size[0];
    const height = size[1] / reportCount;
    const left = designerWidth > width ? (designerWidth - width) / 2 : 0;
    const top = designerHeight > height ? (designerHeight - height) / 2 : 0;
    return connectDropTarget(
      <div
        className={styles.designer}
        style={{ backgroundImage: showGrid ? BackgroudImg : '', width, height, left, top }}
      >
        {nodes.map(node => {
          switch (node.type) {
            default:
              return (
                <TextNode
                  key={node.id}
                  data={node}
                  onNodeClick={() => this.handleNodeClick(node)}
                  isSelected={currentNode && currentNode.id === node.id}
                />
              );
          }
        })}
        <CreateForm
          type={newNodeType}
          modalVisible={modalVisible}
          handleAdd={this.handleAdd}
          handleModalVisible={this.handleModalVisible}
        />
      </div>
    );
  }
}

export default DropTarget(
  ItemTypes.Item,
  {
    drop(props, monitor, component) {
      if (!component) {
        return;
      }
      component.dropItem(monitor.getItem().type);
    },
  },
  connect => ({
    connectDropTarget: connect.dropTarget(),
  })
)(Designer);
